<template>
	<view @click="showTopRight=false">
		<u-navbar titleStyle="font-size:40rpx;color:#333" :placeholder='true' title="浏览记录" :autoBack="true">
			<view slot="right" class="flex">
				<view @click="showmanger=!showmanger" :class="['fontS32',showmanger?'homeRed':'']">
					{{showmanger?'完成':'编辑'}}
				</view>
				<view class="" @click.stop="showTopRight=!showTopRight">
					<u-icon name="more-dot-fill" style='margin-left: 20rpx;'></u-icon>
				</view>
				<TopRight :showTopRight='showTopRight' />
			</view>
		</u-navbar>
		<!-- 	<view v-if="showTopRight" style="background-color: #fff;padding: 32rpx 32rpx 0rpx;box-sizing: border-box;">
			<view class="flex fontS32 flexJBC">
				<view :class="type==2?'active li':'co9 li'" @click="getlist(2)">
					商品
				</view>
				<view :class="type==1?'active li':'co9 li'" @click="getlist(1)">
					旗舰店
				</view>
				<view :class="type==3?'active li':'co9 li'" @click="getlist(3)">
					批发商
				</view> 
			</view>
		</view> -->
		<u-sticky>
			<view style="background-color: #fff;padding: 32rpx 32rpx 0rpx;box-sizing: border-box;">
				<view class="flex fontS32 flexJBC">
					<view :class="type==2?'active li':'co9 li'" @click="getlist(2)">
						商品
					</view>
					<view :class="type==1?'active li':'co9 li'" @click="getlist(1)">
						旗舰店
					</view>
					<view :class="type==3?'active li':'co9 li'" @click="getlist(3)">
						批发商
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 商品 -->
		<view class="" v-if="type==2">
			<u-checkbox-group v-model="checkboxValue1" placement="column">
				<view class="lis" v-for="(item,index) in list" :key="index">

					<view class="time mb24 paddingLR32">
						{{item.date}}
					</view>
					<view class="lis flexJBC" v-for="(itemm,indexx) in item.data" :key="indexx"
						@click="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+itemm.id)">
						<!-- {{indexx}}{{item.length}} -->
						<u-checkbox :customStyle="{marginBottom: '8px'}" :name="itemm.history_id"
							style='margin: 0 16rpx;' v-if="showmanger" activeColor="#DD2131">
						</u-checkbox>
						<view class="" style="width: 240rpx;height: 240rpx;">
							<u-image :src="itemm.image" height="240rpx" width="240rpx" radius='10rpx'>
							</u-image>
						</view>
						<view style="" class="lisRight">
							<view>
								<view class="elipes1" style="width: 400rpx;">
									{{itemm.product_name}}
								</view>
								<view class="co9 mt24">
									{{itemm.care_count}}人想买
								</view>
							</view>
							<view class="flexJBC co9 ">
								<view class="homeRed">
									<text class="fontS24">￥</text>
									<text class="fontS36">{{itemm.price}}</text>
								</view>
								<view>
									月销{{itemm.sales}}件
								</view>
								<view class="Lisicon flexRowCenter" v-if="!showmanger"
									@click.stop="shoucangClick(itemm)">
									<u-icon name="star" color="#999" v-if='!itemm.stars'></u-icon>
									<u-icon name="star" color="red" v-else></u-icon>
									<!-- <u-icon name="shopping-cart" color="#999"  v-else></u-icon> -->
								</view>
								<view class="like fontS24 " v-if="!showmanger"
									@click.stop="$my.go('/pages/cart/similarGoods?id='+itemm.id)">
									找相似
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>

		<!-- 店铺 -->
		<view class="" v-if='type==1'>
			<u-checkbox-group v-model="checkboxValue1" placement="column">
				<view class="lis" v-for="(item,index) in list">
					<view class="time mb24 paddingLR32">
						{{item.date}}
					</view>
					<view class="lis" v-for="(itemm,indexx) in item.data"
						@click="$my.go('/myPackageA/goodsAndFacton/store?store_id='+itemm.id)">
						<view class="flex">
							<u-checkbox :customStyle="{marginBottom: '8px'}" :name="itemm.history_id"
								style='margin: 0 0 0 24rpx;' v-if="showmanger" activeColor="#DD2131">
							</u-checkbox>
							<view class="flexJBC paddingLR24" style="flex: 1;">
								<u-image :src="itemm.store_image" :lazy-load="true" height="80rpx" width="80rpx"
									radius='10rpx'>
								</u-image>
								<view style="margin-left: 20rpx;flex: 1;">
									<view class="flexJBC" style="flex: 1;">
										<view class="fontS32" style="margin-bottom: 8rpx;">
											{{itemm.stroe_name}}
										</view>
										<view class="btnClick1 fontS24 paddingLR24 homeRed borderred"
											style="height: 48rpx;line-height: 48rpx;">
											进店
										</view>
									</view>
									<view class="flex fontS24">
										<u-rate count="5" v-model="itemm.postage_score" :allowHalf='true' size='24rpx'
											:readonly='true' activeColor='#FFC047'
											inactiveColor='rgba(255, 168, 72, 0.2)'></u-rate>
										<view class="fuzhucolor ">
											{{itemm.postage_score}}分
										</view>
										<view class="paddingLR24">
											{{itemm.turnovers}}成交额
										</view>
									</view>
								</view>
							</view>
						</view>
						<scroll-view scroll-x="true">
							<view class="flex" style="flex-wrap: nowrap;padding-left: 24rpx;margin-top: 20rpx;">
								<view v-for="itemmm in itemm.product" style="margin-right: 16rpx;">
									<view class="relative">
										<u-image :src="itemmm.image" :lazy-load="true" width="120" height="120"
											radius="8rpx" />
										<view class="absolute cof rype2imagprice" style="bottom: 0;right: 0;">
											<text class="fontS20">￥</text>
											<text>{{itemmm.price}}</text>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="co9 fontS24 paddingLR24 flexJBC" style="margin-top:20rpx;">
							<view class="">
								<text class="">主营:</text>
								<text class="li_text" v-for="(text,index) in itemm.main_business">{{text}}</text>
							</view>
							<text>{{itemm.address}}</text>
						</view>
					</view>

				</view>
			</u-checkbox-group>
		</view>
		<!-- 工厂 -->
		<view class="" v-if='type==3' style="padding: 0 32rpx;background-color: white;">
			<u-checkbox-group v-model="checkboxValue1" placement="column">
				<view class="lis" v-for="(item,index) in list">
					<view class="time mb24 paddingLR32">
						{{item.date}}
					</view>
					<view class="inner_li" v-for="itemm in item.data"
						@click="$my.go('/myPackageA/goodsAndFacton/store?store_id='+itemm.id)">
						<view class="flex">
							<u-checkbox :customStyle="{marginBottom: '8px'}" :name="itemm.history_id"
								style='margin: 0 0 0 0;' v-if="showmanger" activeColor="#DD2131">
							</u-checkbox>
							<view class="li_factory" style="flex: 1;">
								<view class="left">
									<u-image :src="itemm.store_image" width="200rpx" height="200rpx" radius="8rpx" />
								</view>
								<view class="right" style="flex: 1;">
									<view class="li_box">
										<text class="co3 fw7 fontS28">{{itemm.stroe_name}}</text>
										<text class="float co9 fontS24">{{itemm.address}}</text>
									</view>
									<view class="flexJBC">
										<view class="">
											<text class="co3 fontS24 li_textt"
												v-for="(text,index) in itemm.main_business" :key="index">{{text}}</text>
										</view>
										<text class="float co9 fontS20">已成交{{itemm.turnovers}}</text>
									</view>
									<view class="li_box flex">
										<view class="fontS24 co3" v-for="(text,index) in itemm.tags" :key="index"
											:class="index%2==0?'yellow':'pink'">
											{{text}}
										</view>
									</view>
									<view class="fontS24 co6 elipes2">{{itemm.store_info?itemm.store_info:'暂无门店简介'}}
									</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>


		<view class="bottomBox flexJBC paddingLR32 " v-if="showmanger">
			<u-checkbox-group v-model="isAll" placement="column" @change="checkboxChange">
				<u-checkbox :customStyle="{marginBottom: '8px'}" label="全选" name="all" style='margin-right:24rpx;'
					v-if="showmanger" activeColor="#DD2131">
				</u-checkbox>
			</u-checkbox-group>
			<view class="btnClick1 homeRed borderred" @click="del">
				删除{{checkboxValue1.length>0?checkboxValue1.length:''}}
			</view>
		</view>
		<u-empty width='162px' height="140px" :show='list.length==0 && !pageLoading' marginTop="100rpx"></u-empty>
		<!-- 加载页 -->
		<u-loading-page loading-text="loading..." v-if='pageLoading' :loading='true' bgColor='#f5f5f5'></u-loading-page>
	</view>
</template>
<script>
	import TopRight from '@/componentes/topRight.vue'
	export default {
		components: {
			TopRight
		},
		data() {
			return {
				pageLoading: true,
				showTopRight: false,
				isAll: [], //全选 
				checkboxValue1: [], //多选
				type: 2, // 1店铺2商品3工厂
				page: 1,
				showmanger: false, //true为管理页面 
				list: [],
				total: 0, // list 的总条数
				// listS:[],//商品
				// listD:[],//店铺
				// listG:[],//工厂
			}
		},
		watch: {
			// 监听复选框
			checkboxValue1(newvalue, old) {
				if (newvalue.length < this.total) {
					this.isAll = []
				} else {
					this.isAll = ['all']
				} 
			}
		},
		onReachBottom() {
			this.page++
			this.getlist()
		},
		methods: {
			// 收藏
			shoucangClick(item) {
				if (item.stars) {
					this.$my.post('/index/user/store_follow', {
						id: item.target_id,
						type: this.type,
						is_batch: 0
					}).then(res => {
						if (res.code == 200) {
							item.stars = !item.stars
						}
					})
				} else {
					this.$my.post('/index/user/store_follow', {
						id: item.target_id,
						type: this.type
					}).then(res => {
						if (res.code == 200) {
							item.stars = !item.stars
						}
					})
				}
			},
			// 删除
			del() {
				let _this = this
				if (this.checkboxValue1.length > 0) {
					uni.showModal({
						title: "",
						content: "确定要删除吗",
						cancelText: '取消', // 取消按钮的文字   
						confirmText: '确认', // 确认按钮的文字   
						success: function(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '删除中'
								})
								_this.$my.post('/index/user/del_history', {
									history_id: _this.checkboxValue1
								}).then(res => {
									uni.hideLoading()
									_this.$my.toast(res.message)
									if (res.code == 200) {
										this.list = [];
										_this.getlist();
										_this.checkboxValue1 = []
									}
								})
							}
						}
					})
				} else {
					this.$my.toast('请先选择要删除的列表')
				}
			},
			// 点击全选
			checkboxChange(e) {
				console.log(e)
				this.checkboxValue1 = [];
				this.list.forEach(item => {
					item.data.forEach(item1 => {
						if (e.length > 0) {
							this.checkboxValue1.push(item1.history_id)
						} else {
							this.checkboxValue1 = []
						}
					})
				})
				console.log(this.checkboxValue1, 'this.checkboxValue1')
			},
			getlist(type) {
				if (type) {
					this.page = 1;
					this.type = type;
					this.showmanger = false;
					this.checkboxValue1 = [];
					this.page = 1;
					this.isAll = [];
					this.list = [];
					this.pageLoading = true;
				}
				this.$my.get('/index/user/get_history', {
					limit: 10,
					page: this.page,
					type: this.type
				}).then(res => {
					this.pageLoading = false;
					if (res.code == 200) {
						if (this.page == 1) {
							this.list = res.data.data
						} else {
							this.list = this.list.concat(res.data.data)
						}
						this.total = 0
						this.list.forEach(item => {
							this.total += item.data.length
						})
						console.log(this.isAll, this.isAll[0] == 'all', 'this.isAll')
						if (this.isAll[0] == 'all') {
							this.checkboxChange(['all'])
						}
					}
				})
			}
		},
		onShow() {
			this.getlist()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		padding-bottom: 120rpx;
	}
	.li_text,.li_textt {
		padding: 0 10rpx; 
		box-sizing: border-box;
		border-right: 1rpx solid #999;
	}

	.li_text:last-child,
	.li_textt:last-child {
		border: none;
	}
	.rype2imagprice {
		background: rgba(0, 0, 0, 0.6);
		border-radius: 20rpx 0rpx 8rpx;
		height: 36rpx;
		line-height: 36rpx;
		padding: 0 10rpx;
	}



	.bottomBox {
		width: 100%;
		height: 112rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
	}

	.inner_li {
		padding-bottom: 32rpx;

		&:last-child {
			padding-bottom: 0;
		}
	}

	.lis {
		background-color: #fff;
		padding-bottom: 24rpx;
		// box-sizing: border-box;

		.like {
			padding: 0rpx 10rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 24rpx;
			background-color: #f5f5f5;
		}
		.lisRight {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			margin-left: 30rpx;
			height: 200rpx;
			margin-right: 38rpx;
		}

		.Lisicon {
			width: 48rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 50%;
			text-align: center;
			background-color: #f5f5f5;
		}
	}

	.li {
		padding: 0 52rpx;
		box-sizing: border-box;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		margin-bottom: 40rpx;
	}

	.active {
		background-color: $red;
		color: #fff;
		box-shadow: 0rpx 5rpx 8rpx 1rpx rgba(255, 111, 111, 0.25);
	}

	.li_factory {
		// width: 90%;
		background-color: white;
		display: flex;
		justify-content: space-between;
		// background-color: tomato;



		.left {
			border-radius: 8rpx;
			width: 200rpx;
			height: 200rpx;
			// overflow: hidden;

		}

		.right {
			// flex-grow: 1;
			margin-left: 20rpx;
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.li_box {
				.float {
					float: right;
				}

				.yellow {
					background-color: #FFF2D0;
					padding: 0 8rpx;
					margin-right: 20rpx;
					border-radius: 4rpx;
				}

				.pink {
					margin-right: 20rpx;
					background-color: #FFDED3;
					padding: 0 8rpx;
					border-radius: 4rpx;
				}
			}
		}
	}
</style>
